<template>
	<view>
		<view class="usertop" :style="'background-image: url('+IMG_URL+userInfo.group.back_img+')'">

			<!-- 头像名称 -->
			<view class="user_infms" @tap="$Router.push('/pages/user/zhsz')">
				<u-avatar size="130" 
				:src="userInfo.avatar || IMG_URL + '/imgs/base_avatar.png'"></u-avatar>
				<view class="user_namx">
					<view class="">
						<!-- 用户名 -->
						{{ userInfo.nickname || '请登录~' }}
					</view>
					
					<view class="groupname"  v-if="isLogin">
						<image src="https://s1.ax1x.com/2022/07/14/jfEifx.png" mode=""></image> {{ userInfo.group.name}} 
					</view>
				</view>
			</view>
			<view class="czz" v-if="isLogin">
				<view class="">
					<u-line-progress 
					inactive-color='#f9e0b7'
					height="14"  width='370' active-color="#e3c7a1" :percent="showl" :show-percent='false'></u-line-progress>
				</view>
				<view class="" v-if="isLogin">
					{{ userInfo.growth_value }}/{{userInfo.group.end_amount}}
				</view>
				
			</view>
			<view class="xiyi" v-if="isLogin">
				下一等级：{{userInfo.group.next_group_name}}
			</view>
			<!-- 积分钱包卡券 -->
			<view class="jf">
				<!-- <view class="jfitem" v-for="(item,index) in jfkj" :key="index" @click="jftz(index)">
					<view>{{item.sum}}</view>
					<view class="">
						{{item.name}}
					</view>
				</view> -->
				<view class="jfitem" @click="jftz(0)">
					<view>{{ userInfo.score || '0' }}</view>
					<view class="">
						积分
					</view>
				</view>
				<view class="jfitem" @click="jftz(1)">
					<view>{{ userInfo.money || '0' }}</view>
					<view class="">
						钱包
					</view>
				</view>
				<view class="jfitem" @click="jftz(2)">
					<view>{{ userOtherData.coupons_num || '0' }}</view>
					<view class="">
						卡券
					</view>
				</view>
				<view class="jfitem" @click="jftz(3)">
					<view>{{ userOtherData.favorite_num || '0' }}</view>
					<view class="">
						收藏
					</view>
				</view>
			</view>
		</view>
		<view class="contents">
			<!-- 会员权益 -->
			<view class="quanyi" @tap="$Router.push('/pages/user/vipQuanyi')">
				<text>开通会员，尊享更多特权~</text>
				<view>立即查看</view>
			</view>
			<!-- 我的订单 -->
			<view class="useerdd">
				<view class="userwdddtitle">
					<view class="wddd">
						我的订单
					</view>
					<view class="wdddckgd" @tap="jump('/pages/order/list', { type: 'all' })">
						查看全部
						<u-icon name="arrow-right" style="position: relative;top: -4rpx;"></u-icon>
					</view>
				</view>
				<!-- 待发货待收货 -->
				<view class="daisf">
					<view style="position: relative;" class="" v-for="(item,index) in dasf" :key="index"
						@tap="jump('/pages/order/list', { type: item.type })">
						<view class="">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="">
							{{item.name}}
						</view>
						
						
						<u-badge  v-if="isLogin" v-show="index==1" overflow-count='99' class="badg"  absolute offset size="mini" 
						:count="userOtherData.order_num.nopay" type="error"></u-badge>
						
						<u-badge  v-if="isLogin" v-show="index==2" overflow-count='99' class="badg"  absolute offset size="mini"
						:count="userOtherData.order_num.nosend" type="error"></u-badge>
						
						<u-badge  v-if="isLogin" v-show="index==3" overflow-count='99' class="badg"  absolute offset size="mini"
						:count="userOtherData.order_num.noget" type="error"></u-badge>
						
						<!-- <u-badge  v-if="isLogin" v-show="index==3" overflow-count='99' class="badg"  absolute offset size="mini"
						:count="userOtherData.order_num.nocomment" type="error"></u-badge> -->
						
						<u-badge  v-if="isLogin" v-show="index==4" overflow-count='99' class="badg"  absolute offset size="mini"
						:count="userOtherData.order_num.aftersale" type="error"></u-badge>
					
					</view>
				</view>
			</view>
			<view class="swiperl">
				<u-swiper :list="list1" height="200" border-radius="10" @click="click"></u-swiper>
			</view>
			<view class="qitagn">
				<view class="wddd">
					其他功能
				</view>
				<!-- 其他功能列表 -->
				<view class="qtgnlb">
					<view class="" style="position: relative;" v-for="(item,index) in qtgn" @click="qttz(index)" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="">
							{{item.name}}
						</view>
						<!-- <button v-if="index==5" style="position: absolute;top: 0;left: 0;
						 width: 100%; height: 100%;
						 opacity: 0;
						 " open-type="contact" bindcontact="handleContact" session-from="sessionFrom">
						</button> -->
					</view>
					
				</view>
			</view>
		</view>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				showl:'',
				IMG_URL:this.$IMG_URL,
				user: {}, //用户信息
				jfkj: [{
						name: "积分",
						sum: '100',
						url: './qiandao'
					},
					{
						name: "钱包",
						sum: '100',
						url: './wallet'
					},
					{
						name: "卡券",
						sum: '0',
						url: './kaquan'
					},
					{
						name: "收藏",
						sum: '0',
						url: './souchang'
					}
				], //积分卡包数组
				dasf: [
					{
						name: "全部",
						img: "https://s1.ax1x.com/2022/03/30/q2ku36.png",
						type: 'all',
						num:"0"
						
					},
					{
						name: "待支付",
						img: "https://s1.ax1x.com/2022/03/30/q2FHc8.png",
						type: 'nopay',
						num:"0"
					},
					{
						name: "待发货",
						img: "https://s1.ax1x.com/2022/03/30/q2kp90.png",
						type: 'nosend',
						num:"0"
						
					},
					{
						name: "待收货",
						img: "https://s1.ax1x.com/2022/03/30/q2kAHJ.png",
						type: 'noget',
						num:"0"
						
					},
					
					{
						name: "售后",
						img: "https://s1.ax1x.com/2022/03/30/q2k1De.png",
						type: 'afterSale',
						num:"0"
					}
				], //待收货代发货标题
				list1: [{
						image: 'https://s1.ax1x.com/2022/03/30/q2CelF.png',
						urls: './wallet'
					},
					{
						image: 'https://s1.ax1x.com/2022/03/30/q2Cmy4.png',
						urls: './user'
					}
				],
				qtgn1:[
					{
						name: "关于我们",
						img: 'https://s1.ax1x.com/2022/03/30/q2kvrD.png',
					},
					{
						name: "积分兑换",
						img: 'https://s1.ax1x.com/2022/03/30/q2Apad.png',
						url: "/pages/app/score/list"
					}
				],
				qtgn: [{
						name: "签到中心",
						img: 'https://s1.ax1x.com/2022/03/30/q2kU8P.png',
						url: "./qiandao"
					},
					{
						name: "领券中心",
						img: 'https://s1.ax1x.com/2022/03/30/q2kBDg.png',
						url: "./lingquan"
					},
					{
						name: "会员权益",
						img: 'https://s1.ax1x.com/2022/07/01/jQ8R0I.png',
						url: "./vipQuanyi"
					},
					{
						name: "管理地址",
						img: 'https://s1.ax1x.com/2022/03/30/q2kR2V.png',
						url: "/pages/user/address/list"
					},
					{
						name: "账号设置",
						img: 'https://s1.ax1x.com/2022/03/30/q2k4rF.png',
						url: "./zhsz"
					},
					{
						name: "联系我们",
						img: 'https://s1.ax1x.com/2022/03/30/q2ksEj.png',
						url: "./lxwm/lxwm"
					},
					{
						name: "关于我们",
						img: 'https://s1.ax1x.com/2022/03/30/q2kvrD.png',
					},
					{
						name: "积分兑换",
						img: 'https://s1.ax1x.com/2022/03/30/q2Apad.png',
						url: "/pages/app/score/list"
					}
					
				], //其他功能
				scrollTop: 0,
				showShare: false,
				enable: false //是否开启吸顶。
			}
		},
		computed: {
			...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType', 'userOtherData']),
			userHeadData() {
				if (this.userTemplate?.length) {
					return this.userTemplate[0].content;
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {

			// this.getuser()
			// this.getscnum()
			// this.getdlq()
			
		},
		onShow() {
			this.showl=(this.userInfo.growth_value  / this.userInfo.group.end_amount)*100
			console.log(this.showl+'showl')
			if (this.isLogin) {
				this.init();
				this.getUserData();
			}
			this.enable = true;
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData','getCartList']),
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			handleContact(e) {
			        console.log(e.detail.path)
			        console.log(e.detail.query)
			      },
			init() {
				this.getUserInfo()
					.then(res => {
						uni.stopPullDownRefresh();
					})
					.catch(e => {
						uni.stopPullDownRefresh();
					});
			},
			// 获取用户信息
			getuser() {
				let _this = this
				uni.$u.http.get('/addons/shopro/user').then(res => {
					_this.user = res
					_this.jfkj[1].sum = res.money
					_this.jfkj[0].sum = res.score
					_this.jfkj[3].sum = res.favorite_num
				})
			},
			//获取卡券数量
			getdlq() {
				let _this = this
				uni.$u.http.get('addons/shopro/coupons', {
					params: {
						type: 1
					}
				}).then(res => {
					console.log("卡券")
					_this.jfkj[2].sum = res.length
					console.log(res.length)
				})
			},
			//其他跳转
			qttz(index) {
				if (index == 6) {
					this.$Router.push('/pages/user/about?id=' + this.initShop.about_us)
					return
				}
				let _this = this
				uni.navigateTo({
					url: _this.qtgn[index].url
				})
			},
			//收藏跳转
			jftz(index) {
				let _this = this
				uni.navigateTo({
					url: _this.jfkj[index].url,
				})
			},
			// 轮播图点击
			click(index) {
				console.log(index)
				let _this = this
				if (index == 1) {
					this.showShare = true
					return
				}
				uni.navigateTo({
					url: _this.list1[index].urls
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ .u-badge{
		width: 42rpx;
		height: 42rpx;
	}
	.user_infms {
		display: flex;
		align-items: center;
	}

	.user_infms>view {
		margin-left: 35rpx;
	}

	.usertop {
		padding: 43rpx 35rpx 30rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url("https://s1.ax1x.com/2022/03/24/q8uup6.png");

	}

	.user_namx>view:first-of-type {
		font-size: 37rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.user_namx>view:last-of-type {
		font-size: 26rpx;
		font-weight: 400;
		color: #7C7C7C;
		margin-top: 18rpx;

	}

	.jf {
		display: flex;
		justify-content: space-between;
		margin-top: 51rpx;
	}

	.jfitem>view {
		text-align: center;
	}

	.jfitem>view:first-of-type {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}

	.jfitem>view:last-of-type {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.useerdd {
		padding: 40rpx 30rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 10rpx 10rpx;

	}

	.userwdddtitle {
		display: flex;
		justify-content: space-between;

	}

	.wdddckgd {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
	.badg{
		position: absolute;
		right: 30rpx;
		top: -20rpx;
		white-space: nowrap;
	}
	.wddd {
		font-size: 30rpx;
		font-weight: 800;
		color: #000000;
		position: relative;
	}

	.wdddckgd /deep/ .u-icon__icon {
		position: relative;
		top: 4rpx !important;
	}

	.wddd::after {
		content: "";
		width: 10rpx;
		height: 20rpx;
		border-radius: 0 50% 50% 0;
		background: #FF9A33;
		position: absolute;
		left: -30rpx;
		top: 50%;
		transform: translate(0, -50%);

	}

	.daisf {
		margin-top: 51rpx;
		display: flex;
		justify-content: space-between;
	}

	.daisf>view>view {
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.daisf /deep/ image {
		width: 38rpx;
		height: 42rpx;
		margin-bottom: 22rpx;
	}

	.swiperl {
		margin: 20rpx 0;
	}

	.qitagn {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 40rpx 30rpx 75rpx;
	}

	.qtgnlb {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.qtgnlb>view {
		width: 25%;
		text-align: center;
		margin-top: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.qtgnlb /deep/ image {
		width: 44rpx;
		margin-bottom: 21rpx;
		height: 45rpx;
	}

	.groupname {
		// color: #FF9A33 !important;
		// width: calc(100% - 100rpx );
		width: 180rpx;
		height: 45rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: bold;
		color: #BD9864;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.groupname>image{
		width: 30rpx;
		height: 21rpx;
		margin-right: 8rpx;
	}
	.user_infms>view{
		// width: 100%;
	}
	.quanyi{
		width: 100%;
		height: 80rpx;
		background: linear-gradient(0deg, #5D6271, #060606);
		border-radius: 10rpx 10rpx 0px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx 0 42rpx;
		text{
			font-size: 26rpx;
			color: #F9E0B7;
			font-weight: bold;
		}
		view{
			width: 130rpx;
			height: 40rpx;
			background: #F9E0B7;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #151515;
			font-weight: bold;
			border-radius: 20rpx;
		}
	}
	.czz{
		// text-align: center;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}
	.czz>view{
		width: 370rpx;
		padding-right:20rpx;
	}
	.xiyi{
		font-size: 20rpx;
		font-weight: 400;
		color: #7C7C7C;
		margin-top: 11rpx;
	}
</style>
